<template>
  <view class="logistics-card">
    <image
      v-if="orderHasIcon.includes(info.orderStatus)"
      :src="orderStatusIcon"
    />
    <text>{{ ORDER_STATUS[info.orderStatus] }}</text>
  </view>
  <view class="title-divider">物流信息</view>
  <view class="info-box">
    <view class="info-line">
      物流服务商
      <text>{{ info.deliveryCompanyName || "暂无物流信息" }}</text>
    </view>
    <view class="info-line">
      物流单号
      <text class="text-primary">{{ info.deliverySn || "无" }}</text>
    </view>
  </view>
  <view class="title-divider">收货人信息</view>
  <view class="transport-address">
    <view class="flex items-center mb-6px">
      <text class="text-grey2 mr-8px text-default">{{
        info.receiverName
      }}</text>
      <text class="text-s text-999">{{ info.receiverPhone }}</text>
    </view>
    <view class="text-s text-grey2 leading-20px">
      {{ addressText }}
    </view>
  </view>
  <view class="title-divider">商品信息</view>
  <view class="order-goods" v-for="(item, index) in info.items" :key="index">
    <view
      class="goods-cover cover w-80px h-80px"
      :style="{ backgroundImage: `url(${item.productImageUrl})` }"
    ></view>
    <view
      class="flex-1 flex flex-col leading-none flex-col px-12px h-80px py-2px"
      style="box-sizing: border-box"
    >
      <view class="text-goods flex-1">{{ item.productName }}</view>
      <text class="text-xxs text-999"
        >规格：{{ skuLabel(item.productSkuSpData) }}</text
      >
      <view class="mt-12px text-base"
        >{{ item.productSkuQuantity * item.productSkuScore }}小饼干</view
      >
    </view>
    <text class="text-base">共{{ item.productSkuQuantity }}件</text>
  </view>
  <view class="title-divider">订单信息</view>
  <view class="info-box order">
    <view class="info-line">
      运费
      <text class="text-primary">¥0</text>
    </view>
    <view class="info-line divider">
      合计
      <text>{{ info.scoreAmount }}小饼干</text>
    </view>
    <view class="info-line">
      订单编号：
      <text>{{ info.orderSn }}</text>
    </view>
    <view class="info-line">
      创建时间：
      <text>{{ info.createTime }}</text>
    </view>
    <view class="info-line">
      付款时间：
      <text>{{ info.payTime }}</text>
    </view>
    <view class="info-line">
      订单留言：
      <text>{{ filters(info.note) }}</text>
    </view>
  </view>

  
</template>

<script setup>
import { GetOrderDetail } from "@/services/mall";
import { onLoad } from "@dcloudio/uni-app";
import { computed, reactive } from "vue";
import { filters } from "@/utils/utils";
import { ORDER_STATUS } from "@/CONSTANT";
import { ossImg } from "@/utils/utils";
import privacyPopup from "@/components/privacy-popup";

const orderHasIcon = [0, 1, 2, 3, 4];
const info = reactive({
  items: [],
});

onLoad((option) => {
  getDetail(option);
  getApp().accessLogAdd();
});

const orderStatusIcon = computed(() =>
  ossImg(`icons/order-status/${info.orderStatus}.png`)
);

const addressText = computed(() => {
  const {
    receiverProvince,
    receiverCity,
    receiverRegion,
    receiverDetailAddress,
  } = info;
  return (
    receiverProvince + receiverCity + receiverRegion + receiverDetailAddress
  );
});

// sku 显示
const skuLabel = (skuData) =>
  skuData.map(({ value, key }) => `${key}${value}`).join(" ");

const getDetail = async (params) => {
  const { data } = await GetOrderDetail(params.id);
  Object.assign(info, data);
};
</script>

<style lang="less" scoped>
@import "@/static/css/theme.less";

.logistics-card {
  display: flex;
  align-items: center;
  justify-content: center;
  color: @primary-color;
  padding: 22px 0;
  box-sizing: border-box;
  background-color: white;
  image {
    width: 57px;
    height: 57px;
    margin-right: 12px;
  }
}
.title-divider {
  color: @grey-color-999;
  font-size: 28rpx;
  padding: 12px 21px 10px 21px;
  box-sizing: border-box;
  line-height: 1;
}
.transport-address {
  padding: 14px 21px;
  box-sizing: border-box;
  background-color: #f8f8f8;
  line-height: 1;
}
.order-goods {
  display: flex;
  align-items: flex-end;
  padding: 12px 29px 12px 20px;
  box-sizing: border-box;
  background: white;
}
.info-box {
  &.order {
    .info-line {
      height: 36px;
    }
  }
  .info-line {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 21px;
    background: white;
    box-sizing: border-box;
    font-size: 14px;
    color: #111;
    &.divider {
      border-bottom: 1px solid #f2f2f2;
    }
  }
}
</style>
